<template>
  <div>
    <a-tabs
      v-model:activeKey="activeKey"
      centered
    >
      <a-tab-pane key="1">
        <template #tab>
          <span>
            图标
            Tab 1
          </span>
        </template>
        Content of Tab Pane 1</a-tab-pane>
      <a-tab-pane
        disabled
        key="2"
        tab="Tab 2"
        force-render
      >Content of Tab Pane 2</a-tab-pane>
      <a-tab-pane
        key="3"
        tab="Tab 3"
      >Content of Tab Pane 3</a-tab-pane>
    </a-tabs>

    <a-tabs
      v-model:activeKey="activeKey"
      tab-position="right"
      :style="{ height: '200px' }"
      size="large"
    >
      <a-tab-pane
        v-for="i in 30"
        :key="i"
        :tab="`Tab-${i}`"
      >Content of tab {{ i }}</a-tab-pane>

      <template #leftExtra>
        <a-button class="tabs-extra-demo-button">Left Extra Action</a-button>
      </template>
      <template #rightExtra>
        <a-button>Right Extra Action</a-button>
      </template>
    </a-tabs>
    <a-tabs
      v-model:activeKey="activeKey"
      type="card"
    >
      <a-tab-pane
        key="1"
        tab="Tab 1"
      >Content of Tab Pane 1</a-tab-pane>
      <a-tab-pane
        key="2"
        tab="Tab 2"
      >Content of Tab Pane 2</a-tab-pane>
      <a-tab-pane
        key="3"
        tab="Tab 3"
      >Content of Tab Pane 3</a-tab-pane>
    </a-tabs>
    <a-tabs
      v-model:activeKey="activeKey"
      type="editable-card"
      @edit="onEdit"
    >
      <a-tab-pane
        v-for="pane in panes"
        :key="pane.key"
        :tab="pane.title"
        :closable="pane.closable"
      >
        {{ pane.content }}
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      activeKey: '1',
      panes: [
        {
          title: 'Tab 1',
          content: 'Content of Tab 1',
          key: '1',
        },
        {
          title: 'Tab 2',
          content: 'Content of Tab 2',
          key: '2',
        },
        {
          title: 'Tab 3',
          content: 'Content of Tab 3',
          key: '3',
          closable: false,
        },
      ]
    }
  },
  created() { },
  mounted() { },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
